﻿@{
    Layout = "~/Views/Shared/Main.cshtml";
}
@section head{
    <script type="text/javascript" src="/Scripts/plug.js"></script>
}
<div class="box">
    <div class="title">
        <h3>
            新用户注册</h3>
    </div>
    <div class="box-content">
        <form id="regform" action="/account/register" method="post" class="form-horizontal">
        <input type="hidden" name="token" />
        <div class="control-group">
            <label class="control-label">
                账 号</label>
            <div class="controls">
                <input type="text" class="span4 {required:true,email:true,remote:{url:'/account/usernameonly',messages:'该用户已存在'}}"
                    id="txtusername" name="UserName" placeholder="请输入您的常用邮箱作为您的登录帐号" />
                <span class="help-block" style="color: Gray">例：example@gmail.com</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                昵 称</label>
            <div class="controls">
                <input type="text" class="span4 {required:true}"
                    id="txtnickname" name="NickName" placeholder="请输入您的昵称" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                密 码</label>
            <div class="controls">
                <input type="password" class="span4 {required:true,minlength:6,maxlength:18}" id="txtpassword"
                    name="Password" placeholder="请输入帐号密码" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                确认密码</label>
            <div class="controls">
                <input type="password" class="span4 {required:true,equalTo:'#txtpassword'}" id="txtconfrim"
                    name="Confirm" placeholder="请输入帐号密码" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                类 型</label>
            <div class="controls">
                <label class="radio inline">
                    <input type="radio" name="Role" value="1" checked="checked" />
                    作 者
                </label>
                <label class="radio inline">
                    <input type="radio" name="Role" value="2" />
                    约稿人
                </label>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">
                验 证</label>
            <div class="controls">
                <div class="span3" style="margin-left:0px;">
                    <input type="text" id="txtvaildcode" name="validcode"
                     class="pull-left {required:true,minlength:4,maxlength:4}" 
                     placeholder="请输入右侧验证码" />
                </div>
                <div id="codeimg" style="margin-left: 10px; "> 
                   
                </div>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" id="cbk" name="accept" checked="checked" class="{required:true}" />
                    <a target="_blank" href="/home/agreement">我已阅读并接受《使用协议》</a>
                </label>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                @if (!String.IsNullOrEmpty(ViewBag.Error))
                {
                    <label>
                        <p class="text-error">
                            @ViewBag.Error</p>
                    </label>
                }
                <input type="submit" class="btn btn-info" style="width: 20%"
                    value="立即注册" />
            </div>
        </div>
        </form>
    </div>
</div>
@section tail{
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.metadata.js"></script>
    <script type="text/javascript">
        var validation = new plug.BindValidCode();
        $(function () {
            validation.BindValidator();
            $('#regform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
        });
        function Refalsh(sender) {
            validation.Refalsh(sender);
        }
    </script>
}
